<!DOCTYPE html>
<html>
<head>
	<title>Drizzle's rose</title>
	<meta  charset="utf-8";>
	<style type="text/css">
		body{padding: 0;margin: 0;background: url(bbb.gif);}
		.top{width: 1250px;height: 60px;}
		.top ul{list-style: none;}
		.top	li{float: left}
		.top	a{text-decoration: none;
				display: block;
				height: 60px;
				line-height: 30px;
				width: 400px;
				background-color: #9FF;
				margin-bottom: 1px;
				text-align: center;}
		.top	a:hover{background-color: #069}
		.head{width: 620px;
			height: 520px;
			float: left;}
		    .head p{left:250px;
			    	text-align: center; 
			    	padding-left:60px;
			    	top: 50px;
			    	padding-right:5px; }
		.rose{width: 620px;
			height:520px;
			float: right;}
			.rose span{width:500px;
						height:500px;
						border:1px fff solid;
						position:absolute;
						right:100px;
						top: 75px}
		.beginning{width: 335px;
				height: 900px;
				float: left;
				background: url(wh.gif);}
			.beginning span{position:relative;
							left: 100px;
							right: 150px;
							height: 100px;
							width: 100px;}
			.beginning-a{position:relative;
						top:100px;
						width: 300px;
						height:250px;
						line-height: 20px;
						left: 50px;
						margin-top:-100px;
						font-family: 'Miscrosoft YaHei';
						font-size: 20px;
						color:#906;
						text-align:left;}
			.walking{width: 850px;
					height: 900px;
					margin: 40px auto;
					font-family: 'trebuchet MS', 'Lucida sans', Arial; 
					font-size:14px;
				    color:#444;
				    left:150px;
				    top:480px;
				    position:relative;}
			.walking {  
					border: solid #ccc 1px;  
					border-radius: 6px;   /*圆角边框*/
					box-shadow: 0 1px 1px #ccc;  /*属性向框添加一个或多个阴影*/
					}  
			.walking tr:hover {  
					background: #fbf8e9;  
					transition: all 0.1s ease-in-out;  /*变换过度，以慢速开始和结束(两头慢）*/ 
					}  	
			.walking td, .walking th {  
					border-left: 1px solid #ccc;  
					border-top: 1px solid #ccc;  
					padding: 10px;  
					text-align: left;  
					}  	
			.walking th {  
					background-color: #dce9f9;  
					background-image: gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));  /*渐变*/
					background-image: linear-gradient(top, #ebf3fc, #dce9f9);  /*背景图片渐变*/
					box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  /*属性向框添加一个或多个阴影，外部阴影改内部阴影*/
					border-top: none;  
					text-shadow: 0 1px 0 rgba(255,255,255,.5);  
					}  
	  		.walking td:first-child, .bordered th:first-child {  
					border-left: none;  
					}  		/*父元素对应的首个子元素选择器*/	
	  		.walking th:first-child {  
					border-radius: 6px 0 0 0;   
					}  
	  		.walking th:last-child {  
					-border-radius: 0 6px 0 0;  
					}  
	  		.walking th:only-child{  
					border-radius: 6px 6px 0 0;  
					}  
	  		.walking tr:last-child td:first-child {  
					border-radius: 0 0 0 6px;  
					}  
	  		.walking tr:last-child td:last-child {    
					border-radius: 0 0 6px 0;  
					}  
		
			form{position:relative;
			left: -300px;
			top:100px;
			text-align:left;}
			textarea{width:300px ;
					height:250px ;
					border-radius: 15px;}
			label{display: block;
				height: 20px;
				left: -310px;
				top: -10px;
				text-align: left;
				font-size: 20px;
				line-height: 5px;
				color: #00c;
			}
			.submit{
				display: block;
				line-height: 15px;
				width: 125px;  
		        padding:8px;  
		        background-color: #428bca;  
		        border-color: #357ebd;  
		        color: #fff;  
		        border-radius: 10px;   
		        text-align: center;  
		        vertical-align: middle;  /*设置元素垂直对齐方式*/
		        border: 1px solid transparent;  
		        font-weight: 900;  
		        font-size:125%  }
			.reset{
				display: block;
				line-height: 15px;
				width: 125px;  
		        padding:8px;  
		        background-color: #428bca;  
		        border-color: #357ebd;  
		        color: #fff;  
		        border-radius: 10px;   
		        text-align: center;  
		        vertical-align: middle;  
		        border: 1px solid transparent;  
		        font-weight: 900;  
		        font-size:125%  
			}
			.foot{width: 1250px;
				height: 100px;
				background-color: rgba(153,153,255,0.2);
				border-radius: 20px;
				margin: 0 auto;
				margin-top: 110px}
			.foot p{
				font-family: arial;
				font-size: 30px;
				text-align: center;
				text-shadow: 5px 5px 5px #306;
				color: #00f
			}
			.nav{width:160px ;
				height:50px;
				position: fixed;
				left: 0;
				top: 50%;

				font-family: 'Miscrosoft YaHei'}
			.nav span{width: 160px;
				height: 100px;
				background:#FCC;
				border-bottom: 5px solid #FFF;
				border-radius: 30px;
				text-align: center;
				line-height: 40px;
				color: #FFF;
				font-size: 20px;
				;
			}
	</style>
</head>
<body >
	<div class="top" id="top">
		<ul>
			<li><a href="#beginning">The beginning of story</a></li>
			<li><a href="#walking">Still walking</a></li>
			<li><a href="#future">The future and you</a></li>
		</ul>
	</div>
	<div class="head">
		<p style="color: rgb(204,153,102);"><br/>“你们很美，但你们是空虚的。”<br/>
		小王子仍然在对她们说，“没有人能为你 们去死。<br/>当然咯，我的那朵玫瑰花，一个普通的过路人以为她和你们一样。<br/>可是， 她单独一朵就比你们全体更重要，<br/>因为她是我浇灌的。<br/>因为她是我放在花罩中的。 <br/>因为她是我用屏风保护起来的。<br/>因为她身上的毛虫（除了留下两三只为了变蝴蝶 而外）是我除灭的。<br/>因为我倾听过她的怨艾和自诩，甚至有时我聆听着她的沉默。 <br/>因为她是我的玫瑰。”<br/><br/>“如果有人爱上了在这亿万颗星星中独一无二的一株花，<br/>当他看着这些星星 的时候，<br/>这就足以使他感到幸福。<br/>他可以自言自语地说：<br/>‘我的那朵花就在其中 的一颗星星上……’，<br/>但是如果羊吃掉了这朵花，<br/>对他来说，<br/>好象所有的星星一下 子全都熄灭了一样！<br/>这难道也不重要吗？！”</p>
		<p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;---《The little prince》</p>
	</div>
	<div class="rose"><span><img src="111.jpg"></span></div>
	<div class="beginning" id="beginning"><span><img src="wjy.jpg"></span>
			<div class="beginning-a">
				<p>name:王佳颖</p>
				<p>nickmame:毛毛雨/王奈/小朋友</p>
				<p>age:19</p>
				<p>birthdate:98.11</p>
				<p>birthplace:中国/浙江/台州</p>
				<p>hoppy:看书/睡觉/学习/瞎逛</p>
				<p>E-mail:1029640811@qq.com</p>
				<p>phone number：15268885576</p>
				<p>我想用爱将你围绕，<br/>同时给你自由。</p>
			</div>
	</div>
	<div class="walking" id="walking" stylw="height:850px">
		<table class="walking" style="position:absolute;left:0px;top:0px;margin:0px;">

  <tbody>
    <tr>
      <th>日期</th>
      <th>想法</th>
      <th>几分想来</th>
    </tr>
    <tr>
      <td>2017.4.10</td>
      <td>听说实验室招新，然而我什么也不会。不敢造次。</td>
      <td>8</td>
    </tr>
    <tr>
      <td></td>
      <td>是脸重要还是想法重要,请你给自己一个机会，走进一步。</td>
      <td>9</td>
    </tr>
    <tr>
        <td></td>
        <td>去张望一下下，偷偷的。NO!NO!NO!我要大摇大摆横着走。</td>
        <td>10</td>
    </tr>
    <tr>
      <td></td>
      <td>学长好！再等等！</td>
      <td>7</td>
    </tr>
    <tr>
      <td></td>
      <td>写个HTML+CSS自我介绍，开始开始，百度百度，慕课，知乎，CSDN</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2017.4.11</td>
      <td>HTML关系，基本结构，标签，表单，table</td>
      <td>8</td>
    </tr>
    <tr>
      <td></td>
      <td>找找别人的框架，哇，我给他几个内容呢，要好听一点的名字，我该介绍点什么呢</td>
      <td>10</td>
    </tr>
    <tr>
      <td>2017.4.12</td>
      <td>今天真忙。CSS才开个头，干活干活</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2017.4.12</td>
      <td>今天事情真多，我要带电脑，偷偷学，CSS样式，选择器，文字颜色</td>
      <td>8</td>
    </tr>
    <tr>
      <td>2017.4.14</td>
      <td>瞎忙活一天，正事没干，对着电脑头晕，我要睡觉，不行，还有活没干</td>
      <td>7</td>
    </tr>
    <tr>
      <td></td>
      <td>周五的意义在于明早能睡个好觉，OK干活干活！CSS元素分类，盒子模型，magin?padding?我在学英语？布局模型,晕、、</td>
      <td>7</td>
    </tr>
    <tr>
      <td>2017.4.15</td>
      <td>CSS差不多吧，先动手试试。放了段喜欢的文字，应该有几个页面，做个图片</td>
      <td>7</td>
    </tr>
    <tr>
      <td></td>
      <td>哇，真丑，没见过，更垃圾的，累，外面天气很棒，我好像没吃饭，</td>
      <td>6</td>
    </tr>
    <tr>
      <td></td>
      <td>换换换，删删删，重新开始写。div布局先做好再写内容，导航菜单文字图片。妥协。垃圾。丑！</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2017.4.16</td>
      <td>自我介绍，两句话，我是谁，从哪来，没啦，告诉你什么呢?</td>
      <td>6</td>
    </tr>
    <tr>
      <td></td>
      <td>CSSposition与盒子模型再认识，fixed导航条跟随，个人简介，</td>
      <td>7</td>
    </tr>
    <tr>
      <td></td>
      <td>回顾一周，也许你明白什么但是你还要去做什么，也许不曾属于你，但你知道要怎样靠近，并走出那一步。最后一分留着给自己leeway.</td>
      <td>9</td>
    </tr>
    <tr>
      <td></td>
      <td>最后，谢谢给我一个机会，谢谢让我去尝试，谢谢我的朋友，10分想要靠近你。</td>
      <td>10</td>
    </tr>
   </tbody>
</table>
	</div>
	<div class="future" id="future">
		<form>
		<form action="save.php" method="post" >
    <label >if you want to tell me something：</label>
    <textarea  ">Hi!Drizzle...</textarea>
    <input class="submit"    type="submit" value="submit"  name="submit" /><br/>
    <input class="reset"   type="reset" value="reset"  name="reset" />
	</form>
</div>
	<div class="foot" >
		<p>Thank you!!!</p>
		<p style="font-family: STKaiti ;text-shadow: none;color: #000;
			 font-size: 20px">QQ：1029640811</span></p>
	</div>
	<div class="nav">
		<a href="#top" style="text-decoration: none;"><span>返回顶部</span></a>
	</div>
</body>
</html>